<template>
  <!-- :style="{paddingBottom: boundRect.bottom + 12 + 'px'}" -->
  <view class="diary"  >
    <NavbarCom  >
      <template v-slot:left class="back" >
        <nut-icon name="left"  size="18" @click="backPage" ></nut-icon> 
      </template>
      <template  v-slot:center class="title">日记</template>
    </NavbarCom>
    <view class="diary-container" >
      <view class="diary-card" >
        <view class="diary-input" >
          <textarea 
            :value="diaryContent" 
            placeholder="今天发生了什么，记录一下"
            @input="diaryInput($event)"
            :disabled="showValue"
          />
        </view>
      </view>
      <view class="next-btn" >
        <view class="confrim" @click="nextSetup" > 下一步</view>
      </view>
    </view>
    
  <nut-popup  v-model:visible="showValue" position="bottom" round  :custom-style="{  height: '40%', paddingBottom: '48rpx' }" >
    <cover-view z-index="2000" class="transition-modal" @click.stop>
      <view class="emoji-list " >
        <view class="emoji-item" v-for="item in emojis" :key="item.keyword" >
          <view class="title" > {{item.title}} </view>
          <view class="emojis" >
            <view 
              :class="['emoji', diaryState[item.keyword] === emoji.pic ? 'active' : '']" 
              v-for="emoji in item.options" 
              :key="emoji.name" 
              @click="selectEmoji(item.keyword, emoji)"
              
            >
              <image  mode="aspectFit" :src="emoji.pic" />
              <view class="name" >{{emoji.name}}</view>
            </view>
          </view>
        </view> 
      </view>
      <view class="publish" >
        <view class="mood" >
          <view class="today-mood" >今日心情</view>
          <view class="stars" >
            <nut-rate v-model="diaryState.mood" spacing="6" size="14px" active-color="#FFC800" void-color="ccc"/>
          </view>
        </view>
        <!-- <view :class="['secret', secret ? 'active' : '']" @click="secret = !secret" > 
          <image class="lock" mode="aspectFill" :src=" secret ? '/static/common/lock-fill.png' : '/static/common/lock.png'" />
          <view>私密</view>
        </view> -->
        <view class="confrim" @click="publishDiary" > 发布</view>
      </view>
    </cover-view>
  </nut-popup >
  </view>

</template>
<script lang='ts'  setup >
import NavbarCom from '@/components/navbar-com/navbar-com.vue';
import { DiaryController } from '@/controller';
import { onLoad,onHide } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { useRouterStore } from '@/store'
 
const emojis = ref<API.EMOJIS[]>([])

const draft = ref(false)

const diaryContent = ref('')
 
const isFirstOpen = ref(0)

const today = ref('')

const secret = ref(false)

const showValue = ref(false)

interface DiaryState {
  mood: string;
  money: string;
  health: string;
  work: string;
  relationship: string;
  [key: string]: string;
}
const diaryState = ref<DiaryState>({
  mood: '',
  money: '',
  health: '',
  work: '',
  relationship: ''
})

const nextSetup = () => {
   showValue.value = true
}

const publishDiary = () => {
  uni.showLoading({title: '发布中'})
  DiaryController.addDiary({
    content: diaryContent.value,
    ...diaryState.value
  } as any).then(() => {
    uni.hideLoading()
    uni.showToast({
      title: '发布成功',
      icon: 'success'
    })
    diaryContent.value = ''
    Object.keys(diaryState.value).forEach(key => {
      diaryState.value[key] = ''
    })
  })
}

 const diaryInput = (e: any) => {
  const value = e.detail.value
  diaryContent.value = value
 }

 const selectEmoji = (keyword: string, emoji: API.EMOJI) => {
  console.log('keyword:', keyword);
  
  diaryState.value[keyword] = emoji.pic
 }


//  获取表情包
const getDiaryEmoji = async () => {
  const data = await DiaryController.getDiaryEmoji()
  console.log('data:', data);
  emojis.value = data
}

const backPage = () => {

  uni.switchTab({url:  useRouterStore().routes[0] })
}

const boundRect = ref()

onLoad(() => {
  // console.log(dayjs().day())
  getDiaryEmoji()
  uni.hideTabBar({animation: true})

  boundRect.value = uni.getMenuButtonBoundingClientRect()
})

onHide(() => {
  uni.showTabBar()
})
  

</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';

 .diary {
  width: 100vw;
  height: 100vh;
  // background-color: #eef1f8;
  background: linear-gradient(to bottom right, rgb(242, 252, 251), rgb(253, 239, 251));
  padding-top: 200rpx;
  box-sizing: border-box;
  position: relative;
  .diary-container {
    width: 100vw;
    .next-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 48rpx;
        box-sizing: border-box;
        margin-top: 24rpx;
        position: fixed;
        left: 50%;
        bottom: 148rpx;
        transform: translateX(-50%);
      
        // .active {
        //   border: 2rpx solid #eaac45;
        //   color: #eaac45;
        //   background: #fffbe9;
        // }
        .confrim {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          width: 480rpx;
          height: 66rpx;
          border-radius: 48rpx;
          color: #fff;
          background: linear-gradient(90deg, #eaac45 0%, #f5d08a 100%);
          box-shadow: 0 2rpx 8rpx rgba(234,172,69,0.10);
          font-weight: 600;
          transition: box-shadow 0.2s, background 0.2s;
          &:active {
            background: #eaac45;
            box-shadow: 0 4rpx 16rpx rgba(234,172,69,0.18);
          }
        }
    }
    .diary-card {
      width: 680rpx;
      height: 1000rpx;
      border-radius: 24rpx;
      margin: 0 auto;
      padding: 32rpx 24rpx 24rpx 24rpx;
      box-sizing: border-box;
      margin-top: 32rpx;
      position: relative;
      .diary-input {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
        padding: 24rpx 32rpx;
        margin-bottom: 16rpx;
        box-sizing: border-box;
        textarea {
          width: 100%;
          height: 100%;
          font-size: 28rpx;
          color: #333;
          background: transparent;
          border: none;
          outline: none;
          resize: none;
        }
      }
    
    }
  }
 }

 .transition-modal {
  width: 100vw;
  height: 100%;
  // background: linear-gradient(to bottom right, rgb(242, 252, 251), rgb(253, 239, 251));
  display: flex;
  justify-content: center;
  // flex-direction: column;
  // align-items: center;
  margin-top: 24rpx;
  position: relative;
    .emoji-list {
      width: 100%;
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
        .emoji-item {
          width: 100%;
          display: flex;
          margin-top: 24rpx;
          .title {
            width: 140rpx;
            font-size: 26rpx;
            color: #888;
            font-weight: 500;
          }
          .emojis {
            width: calc(100% - 140rpx);
            display: flex;
            justify-content: flex-start;
            display: flex;
            .emoji {
              display: flex;
              flex: 1;
              justify-content: flex-start;
              margin-right: 8rpx;
              align-items: center;
              border: 1rpx solid #e5e6eb;
              box-sizing: border-box;
              border-radius: 16rpx;
              background: #fff;
              transition: border 0.2s, box-shadow 0.2s;
              box-shadow: 0 1rpx 4rpx rgba(0,0,0,0.03);
              image {
                width: 36rpx;
                height: 36rpx;
                display: block;
              }
              .name {
                font-size: 24rpx;
                margin-left: 4rpx;
                font-weight: 600;
                color: #666;
              }
            }
            .active {
              border: 1rpx solid #eaac45;
              box-shadow: 0 2rpx 8rpx rgba(234,172,69,0.10);
            }
          }
        }
    }
    .publish {
      width: 100vw;
      padding: 0 24rpx; 
      padding-top: 12rpx;
      box-sizing: border-box;
      position: absolute;
      left: 0px;
      bottom: 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1rpx solid rgba(227, 224, 224, 0.4);
      .mood {
        width: 360rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .today-mood {
          font-size: 24rpx;
          color: #666;
          font-weight: 600;
          margin-right: 24rpx;
          margin-top: -12rpx;
        }
      }
      .secret {
        width: 140rpx;
        height: 48rpx;
        border: 2rpx solid #bbb;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #888;
        border-radius: 48rpx;
        background: #fff;
        transition: border 0.2s, color 0.2s, background 0.2s;
        .lock {
          width: 22rpx;
          height: 26rpx;
          display: flex;
          align-items: center;
          margin-right: 8rpx;
        }
      }
       .confrim {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          width: 240rpx;
          height: 68rpx;
          border-radius: 48rpx;
          color: #fff;
          background: linear-gradient(90deg, #eaac45 0%, #f5d08a 100%);
          box-shadow: 0 2rpx 8rpx rgba(234,172,69,0.10);
          font-weight: 600;
          transition: box-shadow 0.2s, background 0.2s;
      }
    }
   
 }
</style>